<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .red-1 {
      background-color: red;
    }
    .green {
      background-color: green;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>{{ msg }}</h1>
  <h3 v-once>这个将不会改变: {{ msg }}</h3>
  <hr>
  <h1 :class="cName + '-1'">{{ rawHTML }}</h1>
  <div v-html="rawHTML"></div>
  <button :disabled="able" @click="cName = 'green'">change color</button>
  <hr>
  <h1>{{ msg.repeat(2) }}</h1>
  <h1>{{ able ? "哈喽": "呸！" }}</h1>
  <h1>{{ msg.split("").reverse().join("") }}</h1>
</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    data: {
      able: true,
      cName: "red",
      msg: "hello vue!",
      rawHTML: "hello <span style='color: red'>vue</span>!"
    }
  }).$mount("#app")
  // `${ 1 + 1  }`
</script>


<!--
v-bind:attr="" => :attr=""
v-on:event=""  => @event=""


HTML 的模板语法

jsx
render() {
  return <div className={}>
    // { this.state.msg }
  </div>
}

数据响应式的  vue2, vue3
diff
虚拟DOM
MVVM
-->
</body>
</html>
